<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-transparent justify-end" class="navbar">
			<block slot="right">
				<view class="wp100 px15 flex align-center justify-between">
					<view class="navbar-left">邦聊</view>
					<view class="flex align-center space-between px15 navbar-center">
						<text class="text-color" 
						      :class="{current: currentIndex === index}"
						      v-for="(item, index) in titles"
							  :key="item"
							  @click="textClick(index)">
							{{item}}
						</text>
					</view>
					<image src="/static/zhibo/zhibo.png" class="block25"></image>
				</view>
			</block>
		</cu-custom>
		
		<view class="">
			<scroll-view scroll-y="true" v-if="currentIndex === 0" class="attention">
				<view class="attention-top">
					<image src="/static/zhibo/guanzhuimg.png" class="guanzhu" mode=""></image>
					<view class="text1">欢迎来到邻里</view>
					<view class="text2">关注你感兴趣的人，他们的作品会显示在这里。</view>
				</view>
				<view class="separate">你可能感兴趣的人</view>
				
				<view class="attention-content">
					<view class="headImg">
						<image src="/static/zhibo/touxiang.jpg" mode=""></image>
					</view>
					<view class="info">
						<view class="top">
							<view class="titleLeft">
								<view class="nickname">人生如若初见</view>
								<view class="other">你在他的通讯录里</view>
							</view>
							<view class="right" v-if="!isAttention" @click="attentionClick">关注</view>
							<view class="right" v-else  @click="yiAttentionClick">已关注</view>
						</view>
						<view class="bottom">
							<image src="/static/zhibo/geti1.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti2.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti3.png" class="image" mode=""></image>
						</view>
					</view>
				</view>
				<view class="attention-content">
					<view class="headImg">
						<image src="/static/zhibo/touxiang.jpg" mode=""></image>
					</view>
					<view class="info">
						<view class="top">
							<view class="titleLeft">
								<view class="nickname">人生如若初见</view>
								<view class="other">你在他的通讯录里</view>
							</view>
							<view class="right" v-if="!isAttention" @click="attentionClick">关注</view>
							<view class="right" v-else  @click="yiAttentionClick">已关注</view>
						</view>
						<view class="bottom">
							<image src="/static/zhibo/geti1.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti2.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti3.png" class="image" mode=""></image>
						</view>
					</view>
				</view>
				<view class="attention-content">
					<view class="headImg">
						<image src="/static/zhibo/touxiang.jpg" mode=""></image>
					</view>
					<view class="info">
						<view class="top">
							<view class="titleLeft">
								<view class="nickname">人生如若初见</view>
								<view class="other">你在他的通讯录里</view>
							</view>
							<view class="right" v-if="!isAttention" @click="attentionClick">关注</view>
							<view class="right" v-else  @click="yiAttentionClick">已关注</view>
						</view>
						<view class="bottom">
							<image src="/static/zhibo/geti1.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti2.png" class="image" mode=""></image>
							<image src="/static/zhibo/geti3.png" class="image" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<scroll-view scroll-y="true" v-if="currentIndex === 1" class="find">
				<view class="find-content">
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/shipin.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/gz.png" mode="" class="gz"></image>
							<text>70.3w</text>
						</view>
					</view>
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/shipin.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/gz.png" mode="" class="gz"></image>
							<text>70.3w</text>
						</view>
					</view>
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/shipin.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/gz.png" mode="" class="gz"></image>
							<text>70.3w</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<scroll-view scroll-y="true" v-if="currentIndex === 2" class="sameCity">
				<view class="find-content">
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/tongcheng.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/position.png" mode="" class="gz"></image>
							<text>13.56 km</text>
						</view>
					</view>
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/tongcheng.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/position.png" mode="" class="gz"></image>
							<text>13.56 km</text>
						</view>
					</view>
					<view class="content">
						<view class="cover">
							<image src="/static/zhibo/tongcheng.png" mode=""></image>
							<image src="/static/zhibo/touxiang.jpg" class="headImg" mode=""></image>
						</view>
						<view class="redStar">
							<image src="/static/zhibo/position.png" mode="" class="gz"></image>
							<text>13.56 km</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- <image v-if="currentIndex === 0" src="/static/zhibo/wode.jpg" class="aaa-img" mode="" @click="btnClick"></image>
			<image v-else-if="currentIndex === 1" src="/static/zhibo/faxian.jpg"  class="aaa-img" mode=""></image>
			<image v-else src="/static/zhibo/tongcheng.jpg"  class="aaa-img" mode=""></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: ["关注", "发现", "同城"],
				currentIndex: 0,
				isAttention: false
			}
		},
		methods: {
			textClick(index) {
				console.log(index);
				this.currentIndex = index;
			},
			btnClick() {
				this.pushPage("/pages/zhibo/zhibo");
			},
			attentionClick() {
				this.isAttention = true;
			},
			yiAttentionClick() {
				this.isAttention = false;
			}
		}
	}
</script>

<style lang="less">
.navbar {
	width: 100%;
	font-size: 28rpx;
	
	.navbar-left {
		color: #000;
		font-size: 30rpx;
	}
	
	.navbar-center {
		display: flex;
		justify-content: space-between;
		width: 308rpx;
		font-weight: bold;
	}
	
	.navbar-right {
		width: 48rpx;
		height: 48rpx;
	}
}
.content {
	width: 100%;
	font-size: 50rpx;
	font-weight: bold;
	text-align: center;
}
.titleCenter {
	display: flex !important;
	justify-content: space-between !important;
}

.text-color {
	color:#c6c6c6;
	padding-bottom: 4rpx;
}
.current {
	color: #000;
	border-bottom: 4rpx solid #000;
}

.attention, .find, .sameCity {
	height: calc(100vh - 90rpx - 100rpx);
}

.attention {
	.attention-top {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 44rpx 0;
		.guanzhu {
			width: 240rpx;
			height: 240rpx;
		}
		.text1 {
			font-size: 38rpx;
			font-weight: bold;
			margin: 36rpx 0 20rpx;
		}
		.text2 {
			color: #adadad;
			font-size: 26rpx;
		}
	}
	
	.separate {
		display: flex;
		align-items: center;
		width: 100%;
		height: 116rpx;
		padding: 0 30rpx;
		color: #666;
		background: #f6f6f6;
	}
	
	.attention-content {
		width: 100%;
		padding: 30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		
		.headImg image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		
		.info {
			flex: 1;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.top {
				display: flex;
				justify-content: space-between;
				align-content: center;
				height: 100rpx;
				padding-bottom: 20rpx;
				
				.titleLeft {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.nickname {
						font-size: 28rpx;
						font-weight: bold;
					}
					
					.other {
						font-size: 26rpx;
						color: #bab9ba;
					}
				}
				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 32rpx;
					border: 2rpx solid #fe7255;
					height: 56rpx;
					color: #fe7255;
				}
			}
			
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.image {
					width: 180rpx;
					height: 180rpx;
				}
			}
		}
	}
}

.find-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 16rpx;
	
	.content {
		width: 49%;
		
		.cover {
			position: relative;
			width: 100%;
			height: 648rpx;
			
			.headImg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 8rpx;
				bottom: -32rpx;
				border-radius: 50%;
			}
		}
		
		.redStar {
			width: 100%;
			height: 60rpx;
			font-size: 28rpx;
			font-weight: 100;
			color: #cbcdcc;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 8rpx;
			
			.gz {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
